<template>
  <div class="hello">
    <div class="main-wrapper">
      <div class="slider_type2  wow fadeInDown">
        <img class="primary_img" src="../../static/images/productimg/chanpingbg.png" alt="" />
      </div>
      <!-- 占位删除会报错 -->
      <div class="container d-none">
        <div class="slide-content text-left">
          <span class="typed"> </span>
        </div>
      </div>
      <div class="section">
        <div class="container">
          <div class="power_heading_wrapper text-center">
            <h1 class="power_title ">产品展示</h1>
            <div class="power_title_line"></div>
            <div>Product display</div>
          </div>
          <div class="row">
            <div class="col-lg-3 col-md-6 col-50">
              <div class="power_iconbox type_2 type_11 wow">
                <div class="power_iconbox_icon album_gallery_part">
                  <img class="w-100" src="../../static/images/productimg/chanping1.png" alt="alt">
                </div>
                <div class="power_iconbox_content">
                  <h5 class="text-center type_2h5">佳人粉</h5>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-50">
              <div class="power_iconbox type_2 type_22 wow fadeInLeft">
                <div class="power_iconbox_icon album_gallery_part">
                  <img class="w-100" src="../../static/images/productimg/chanping2.png" alt="alt">
                </div>
                <div class="power_iconbox_content">
                  <h5 class="text-center type_2h5">极地白</h5>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-50">
              <div class="power_iconbox type_2 type_33 wow fadeInLeft">
                <div class="power_iconbox_icon album_gallery_part">
                  <img class="w-100" src="../../static/images/productimg/chanping3.png" alt="alt">
                </div>
                <div class="power_iconbox_content">
                  <h5 class="text-center type_2h5">天使蓝</h5>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-50">
              <div class="power_iconbox type_2 type_44 wow fadeInLeft">
                <div class="power_iconbox_icon album_gallery_part">
                  <img class="w-100" src="../../static/images/productimg/chanping4.png" alt="alt">
                </div>
                <div class="power_iconbox_content">
                  <h5 class="text-center type_2h5">香槟金</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section partners">
        <div class="container">
          <div class="power_heading_wrapper text-center">
            <h1 class="power_title ">产品优势</h1>
            <div class="power_title_line"></div>
            <div>Product display</div>
          </div>
          <div class="power_partners_list">
            <div class="row">
              <div class="col-lg col-md-4 col-sm-4">
                <div class="power_partner advantage1">
                  产品外观设计新颖，
                  满足消费者对产品
                  的外观审美
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-4">
                <div class="power_partner advantage2">
                  电气部件能耗低、
                  效率高
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-4">
                <div class="power_partner advantage3">
                  整体性能设计先进，
                  智能光感系统控制
                  产品植物生长灯
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-4">
                <div class="power_partner advantage4">
                  种植操作简单、运行
                  可靠
                </div>
              </div>
              <div class="col-lg col-md-4 col-sm-4">
                <div class="power_partner advantage5">
                  产品价格亲民，满
                  足普通老百姓精打
                  细算的消费习惯
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="slider mousemove" style="background-image:url(../../static/images/productimg/chanping5.png);padding:200px 0">
      </div> -->
      <div class="section">
        <div class="container">
          <div class="power_heading_wrapper text-center">
            <h1 class="power_title ">育苗视频</h1>
            <div class="power_title_line"></div>
          </div>
          <div class="row">
            <div class="col-lg-6 col-md-6">
              <video class="w-100" src="https://caiduoduomall.com/image/Video/home-banner-v.mp4" controls="controls" poster="../../static/images/indeximg/ship.png"></video>
              <div class="text-center">蔬菜育苗技术视频操作指南 (一)</div>
            </div>
            <div class="col-lg-6 col-md-6">
              <video class="w-100" src="https://caiduoduomall.com/image/Video/home-banner-v.mp4" controls="controls" poster="../../static/images/indeximg/ship.png"></video>
              <div class="text-center">蔬菜育苗技术视频操作指南 (二)</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.section {
  padding-top: 30px;
}
.type_2h5 {
  margin: 0 !important;
}
.power_iconbox.type_11:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ffa2b8;

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.power_iconbox.type_22:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #dcdcdc;

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.power_iconbox.type_33:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #86cdee;

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.power_iconbox.type_44:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ceb28d;

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.power_iconbox.type_2:hover h5,
.power_iconbox.type_2:hover p {
  color: #fd1b5b;
}
.power_iconbox.type_2 {
  padding: 0 0 10px 0;
  box-shadow: 0px 15px 25px rgb(253 27 91 / 24%);
}
.d-i-b {
  display: inline-block;
}
.section {
  padding-bottom: 10px;
}
.power_title {
  width: 100%;
  height: 42px;
  font-size: 30px;
  text-align: center;
  font-weight: 500;
  color: #646464;
  line-height: 42px;
}
.advantage1 {
  padding: 20px 15px;
  line-height: 25px;
  height: 125px;
  background: #32c485;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  color: #ffffff;
}
.advantage2 {
  padding: 20px 15px;
  line-height: 25px;
  height: 125px;
  background: #65c0b7;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  color: #ffffff;
}
.advantage3 {
  padding: 20px 15px;
  line-height: 25px;
  height: 125px;
  background: #6c81f0;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  color: #ffffff;
}
.advantage4 {
  padding: 20px 15px;
  line-height: 25px;
  height: 125px;
  background: #8971f5;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  color: #ffffff;
}
.advantage5 {
  padding: 20px 15px;
  line-height: 25px;
  height: 125px;
  background: #d071f5;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .col-50 {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
</style>
